<template>
  <div class="weui-flex">
    <div class="weui-flex__item ta-r">
      <picker mode="multiSelector" :range="range" :value="pickerValue" @change="onChange">
        <span :class="{'c-black': value}">{{name}}</span>
      </picker>
    </div>
    <div style="width:26px;text-align: right;" v-if="time" @tap="onReset"><span><i class="if icon-close-solid"></i></span></div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import * as _helper from '@/utils/helper'

export default {
  props: {
    label: {
      type: String,
      default: '请选择时间'
    },
    value: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      date: 0,
      hour: 0,
      minute: 0,
      time: this.value
    }
  },
  computed: {
    dayOpts () {
      return this.genDayOpts()
    },
    hourOpts () {
      return this.genHourOpts()
    },
    minuteOpts () {
      return this.genMinuteOpts()
    },
    range () {
      let dayOpts = this.dayOpts
      let des = Object.values(dayOpts)

      let hourOpts = this.hourOpts
      let hes = []
      Object.keys(hourOpts).sort().forEach(k => {
        hes.push(hourOpts[k])
      })

      let minuteOpts = this.minuteOpts
      let ses = []
      Object.keys(minuteOpts).sort().forEach(k => {
        ses.push(minuteOpts[k])
      })

      let range = [
        [...des],
        [...hes],
        [...ses]
      ]
      return range
    },
    pickerValue () {
      let value = this.value ? dayjs(this.value) : dayjs()
      let date = value.format('YYYY-MM-DD')
      let hour = value.format('HH')
      let minute = value.format('mm')
      let _minute = parseInt(minute)
      let _hour = parseInt(hour)
      if (_minute % 5 !== 0) {
        _minute = _minute + (5 - _minute % 5)
        if (_minute === 60) {
          _minute = 0
          _hour = _hour + 1 < 24 ? _hour + 1 : 0
        }
      }

      minute = _helper.pad0(_minute, 2)
      hour = _helper.pad0(_hour, 2)

      this.date = date
      this.hour = hour
      this.minute = _minute
      let idxDate = Object.keys(this.dayOpts).findIndex(n => n === date)
      let idxHour = Object.keys(this.hourOpts).sort().findIndex(n => n === hour)
      let idxMinute = Object.keys(this.minuteOpts).sort().findIndex(n => n === minute)
      return [idxDate, idxHour, idxMinute]
    },
    name () {
      if (!this.value) return this.label
      let t = `${this.dayOpts[this.date]} ${this.hour}:${this.minute}`
      return t
    }
  },
  methods: {
    genDayOpts () {
      let td = dayjs()
      let des = []
      for (var i = 0; i < 180; i++) {
        let nd = td.add(i, 'day')
        let label = nd.format('YYYY-MM-DD ddd')
        if (i === 0) {
          label = '今天'
        } else if (i === 1) {
          label = '明天'
        } else if (i === 2) {
          label = '后天'
        } else {
          if (_helper.isThisWeek(nd)) {
            label = '本' + nd.format('ddd')
          } else if (_helper.isNextWeek(nd)) {
            label = '下' + nd.format('ddd')
          }
        }
        des[nd.format('YYYY-MM-DD')] = label
      }
      return des
    },
    genHourOpts () {
      let opts = {}
      for (let i = 0; i < 24; i++) {
        opts[_helper.pad0(i, 2)] = `${i}点`
      }
      return opts
    },
    genMinuteOpts () {
      let opts = {}
      for (let i = 0; i < 60; i++) {
        if (i % 5 !== 0) continue
        opts[_helper.pad0(i, 2)] = `${i}分`
      }
      return opts
    },
    onChange (e) {
      let value = e.mp.detail.value
      let idxDate = value[0]
      let idxHour = value[1]
      let idxMinute = value[2]
      let dates = Object.keys(this.dayOpts)
      let hours = Object.keys(this.hourOpts).sort()
      let minutes = Object.keys(this.minuteOpts).sort()
      let time = `${dates[idxDate]} ${hours[idxHour]}:${minutes[idxMinute]}:00`
      this.time = time
      this.$emit('input', time)
    },
    onReset () {
      this.time = ''
      this.$emit('input', '')
    }
  },
  watch: {
    value (nv) {
      if (nv) return
      this.time = ''
    }
  }
}
</script>

<style scoped lang="less">
</style>
